home *** CD-ROM | disk | FTP | other *** search
/ Young & Modern Digital Makeover Magic / Young & Modern Digital Makeover Magic.iso / data1.cab / Media / buttonAnim.js < prev    next >
Encoding:
JavaScript  |  1999-10-18  |  2.6 KB  |  110 lines
  1. /*
  2.     The ButtonAnim class
  3.     A little javascript image replacement animation.
  4.     
  5.     Notes:
  6.         This constructor assumes that all frames of the animations
  7.     are .gif files, whose names follow the convention:
  8.                     baseFilename_n.gif
  9.     where n is the frame number (zero based). The routine animates
  10.     the given number of frames in animTime_ms milliseconds, then 
  11.     pauses repeatDelay_ms.
  12.         What's cool about this is that you can have any number of these
  13.     guys on a given page. Page events can trigger them to turn on and off.
  14.  
  15.  
  16.  
  17. */
  18. function ButtonAnim(buttonName,
  19.                     imgTagName, 
  20.                     baseFilename, 
  21.                     numImages,
  22.                     animTime_ms,
  23.                     repeatDelay_ms)
  24. {
  25.     this.recursionObject = buttonName +".tick()";
  26.     this.resetImgObject = buttonName + ".resetToFrameZero()";
  27.     this.theTagName    = imgTagName;    
  28.     this.timeoutId    = null;
  29.  
  30.     //Use caution: image filename convention is ZERO based!
  31.     this.numFrames = numImages;
  32.  
  33.     //Time tick between frames
  34.     this.frameTick = animTime_ms/numImages;
  35.  
  36.     //Delay between animated sequences
  37.     this.repeatDelay = repeatDelay_ms;
  38.  
  39.     //The object needs to keep track of where it is
  40.     //for event handling purposes.
  41.     this.currentFrameNum = 0;
  42.  
  43.     //Object also has to know whether to run or not.
  44.     this.isRunning = false;
  45.  
  46.     //Load all the images into local memory for speed.
  47.     this.images = new Array(numImages);
  48.  
  49.     for(i=0; i<numImages; i++)
  50.     {
  51.         this.images[i] = new Image();
  52.         this.images[i].src = baseFilename + "_" + i.toString() +".jpg";
  53.     }
  54. }
  55.  
  56. ButtonAnim.prototype.tick = function()
  57. {
  58.     //A function that references itself to do the
  59.     //image replacement.
  60.  
  61.     if(!this.isRunning)
  62.     {
  63.         clearTimeout(this.timeoutId);
  64.         this.timeoutId = null;
  65.         return;
  66.     }
  67.     document[this.theTagName].src = this.images[this.currentFrameNum].src;
  68.     this.currentFrameNum++;
  69.     if(this.currentFrameNum == this.numFrames)
  70.     {
  71.         this.currentFrameNum = 0;
  72.         this.timeoutId = setTimeout(this.recursionObject,    this.frameTick+this.repeatDelay);
  73.     }
  74.     else
  75.     {
  76.         this.timeoutId = setTimeout(this.recursionObject, this.frameTick);
  77.     }
  78. }
  79. ButtonAnim.prototype.resetToFrameZero = function()
  80. {
  81.     document[this.theTagName].src = this.images[0].src;
  82. }
  83. ButtonAnim.prototype.startAnim = function()
  84. {
  85.     if(!this.isRunning)
  86.     {
  87.         this.isRunning = true;
  88.         this.tick();
  89.     }
  90. }
  91. ButtonAnim.prototype.stopAnim = function()
  92. {
  93.     clearTimeout(this.timeoutId);
  94.     this.timeoutId = null;
  95.     this.isRunning = false;
  96.     setTimeout(this.resetImgObject, this.frameTick);
  97. }
  98. ButtonAnim.prototype.toggleAnim = function()
  99. {
  100.     if(this.isRunning == false)
  101.     {
  102.         this.startAnim();    
  103.     }
  104.     else
  105.     {
  106.         this.stopAnim();
  107.     }
  108. }
  109.  
  110.